<mat-card style="padding: 0" class="mat-elevation-z2">
  <mat-toolbar color="primary" class="header">
    <span style="cursor: pointer;">
      <a routerLink="/">
        <img id="logo-img" src="/assets/logos/trex.svg" />
      </a>
    </span>

    <span fxHide="false" fxHide.lt-md>
      <a mat-button href="#getStarted">
        Get started
      </a>
      <a mat-button href="#pricing">
        Pricing
      </a>
      <a mat-button href="https://github.com/1backend/1backend" target="_blank">
        GitHub
      </a>
      <button mat-button routerLink="/projects">
        Discover projects
      </button>
    </span>

    <span style="flex: 1 1 auto"></span>

    <span>
      <mat-menu #menu="matMenu">
        <button fxShow="false" fxShow.lt-md mat-menu-item (click)="getStarted()">
          <mat-icon style="color: #1E88E5">play_arrow</mat-icon>
          <span>Get started</span>
        </button>
        <button fxShow="false" fxShow.lt-md mat-menu-item (click)="pricing()">
          <mat-icon style="color: #1E88E5">credit_card</mat-icon>
          <span>Pricing</span>
        </button>
        <button fxShow="false" fxShow.lt-md mat-menu-item (click)="github()">
          <mat-icon style="color: #1E88E5">code</mat-icon>
          <span>GitHub</span>
        </button>
        <button fxShow="false" fxShow.lt-md mat-menu-item (click)="discoverProjects()">
          <mat-icon style="color: #1E88E5">list</mat-icon>
          <span>Discover projects</span>
        </button>
        <button *ngIf="us.loggedIn()" mat-menu-item (click)="viewProfile()">
          <mat-icon style="color: #1E88E5">assignment_ind</mat-icon>
          <span>View profile</span>
        </button>
        <button class="login-button" fxShow="false" fxShow.lt-md *ngIf="!us.loggedIn()" mat-menu-item (click)="login()">
          <mat-icon style="color: #1E88E5">power_settings_new</mat-icon>
          <span>Log in</span>
        </button>
        <button class="register-button" fxShow="false" fxShow.lt-md *ngIf="!us.loggedIn()" mat-menu-item (click)="register()">
          <mat-icon style="color: #1E88E5">power_settings_new</mat-icon>
          <span>Register</span>
        </button>
        <button class="logout" id="logout" *ngIf="us.loggedIn()" mat-menu-item (click)="logout()">
          <mat-icon style="color: #F44336">power_settings_new</mat-icon>
          <span>Logout</span>
        </button>
      </mat-menu>

      <span fxHide="false" fxHide.lt-md>
        <button *ngIf="user && user.Id" mat-button [matMenuTriggerFor]="menu" class="dropdown-menu" id="dropdown-menu">
          <span>
            {{user.Nick}}
          </span>
          <mat-icon>keyboard_arrow_down</mat-icon>
        </button>

        <ng-container *ngIf="!us.loggedIn()">
          <button id="login-button" class="ligin-button" mat-button (click)="login()">
            Login
          </button>
          <button id="register-button" class="register-button" style="color: #2C2C2C;" color="accent" mat-raised-button (click)="register()">
            Register
          </button>
        </ng-container>
      </span>

      <span fxHide="false" fxHide.gt-sm>
        <button style="padding-right: 0; margin-right: 0;" mat-button [matMenuTriggerFor]="menu">
          <mat-icon style="color: white">dehaze</mat-icon>
        </button>
      </span>
    </span>

  </mat-toolbar>
</mat-card>